<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .demo-reg-container{ width: 420px; margin: 21px auto 0;}
</style>
<form action="../update" class="layui-form" method="post" enctype="multipart/form-data" >
    <div class="demo-reg-container">
        <input type="hidden" name="singerid" value="${singer.singerid}">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name" value="${singer.name}" lay-verify="required" placeholder="username" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="age" value="${singer.age}" lay-verify="required" placeholder="age" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text" name="phone" value="${singer.phone}" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <input type="text" name="motto" value="${singer.motto}" lay-verify="required" placeholder="座右铭" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">歌手信息</label>
            <div class="layui-input-block">
                <textarea placeholder="歌手信息" name="singerinfo" value="${singer.singerinfo}" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <label class="layui-form-label">sex</label>
                <input type="radio" name="sex" value="0" title="woman" >
                <input type="radio" name="sex" value="1" title="man" checked>
            </div>
        </div>
        <div>
            <input type="file" name="file" id="file">
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">录入</button>
        </div>
    </div>
</form>
<script src="//unpkg.com/layui@2.9.0/dist/layui.js"></script>
<script>
    layui.use(function(){
        //data:事件处理
        var laydate = layui.laydate;
        // 渲染
        laydate.render({
            elem: '#ID-laydate-demo'
        });
        // 渲染

        var form = layui.form;
        var layer = layui.layer;
        // radio 事件
        form.on('radio(demo-radio-filter)', function(data){
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象

            layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
        });
        // 通过表单提交事件，演示 radio 不同状态下的字段结果
        form.on('submit(demo-radio-submit)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>